@if (label() || tooltip()) {
  <ix-label
    [label]="label()"
    [tooltip]="tooltip()"
    [required]="required()"
  ></ix-label>
}

<div
  class="checkbox-list"
  [class.inline]="inlineFields()"
  [attr.aria-label]="label()"
>
  @for (option of options() | async; track option) {
    <mat-checkbox
      class="checkbox"
      color="primary"
      [checked]="isChecked(option.value)"
      [style.flex-basis]="fieldFlex()"
      [attr.aria-label]="option.label"
      [disabled]="isDisabled"
      [ixTest]="[controlDirective.name, option.label]"
      (change)="onCheckboxChanged(option.value)"
      (blur)="onTouch()"
    >
      {{ option.label | translate }}
    </mat-checkbox>
  }
</div>

@let control = controlDirective.control;
@if (control) {
  <ix-errors [control]="control" [label]="label()"></ix-errors>
}
